<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="http://www.mobiletrain.org/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2989423_g2bpxj3nqhk.css" />
    <link rel="stylesheet" href="./assets/css/index.css"> 
    <link rel="stylesheet" href="./assets/css/song.css"> 
    <title>歌单</title>

</head>

<body>
<!-- captcha -->
<section class="captcha" style="visibility: hidden;">
    <h2>
        <span>行为验证码</span>
        <i class="iconfont icon-close"></i>
    </h2>
    <div class="check">
        <img src="./assets/imgs/captcha.jpeg" alt="">
        <img src="./assets/imgs/captcha_zfx.png" alt="">
    </div>
    <div class="drag">
        <div class="btn"></div>
    </div>
</section>
<!-- captcha -->

<!-- login -->
<section class="login" style="visibility: hidden;">
    <div class="item">
        <div class="menu"></div>
        <div class="form">
            <p class="close"><i class="iconfont icon-close"></i></p>
            <p class="font">登录/注册</p>
            <input type="text" class="mobile" placeholder="请输入手机号">
            <!-- <p class="msg">请输入手机号</p> -->
            <p class="msg1"></p>
            <input type="text" class="password" placeholder="请输入验证码" maxlength="4">
            <!-- <p class="msg">请输入手机号</p> -->
            <p class="msg2"></p>
            <button class="captcha">获取验证码</button>
            <button class="submit">登录/注册</button>
        </div>
    </div>
</section>
<!-- login -->

<!-- backTop -->
<img src="./assets/imgs/goTop.png" class="backTop">
<!-- backTop -->

<!-- 头 -->
<header>
    <section>
        <img class="logo" src="./assets/logo.png" alt="logo">

        <ul class="navs">
            <li><a href="./index.html">首页</a></li>
            <li class="active"><a href="./song.html">歌单</a></li>
            <li><a href="./player.html">🎵音乐盒</a></li>
            <li><a href="./video.html">🎬小视频</a></li>
        </ul>

        <div class="member">
            <input type="text" placeholder="请输入歌名、歌词、歌手或专辑">
            <i class="iconfont icon-sousuo"></i>
            <!-- <img src="./assets/imgs/avatar.webp" alt="avatar"> -->
            <div><span>登录</span> <span>/</span> <span>注册</span></div>
        </div>
    </section>
</header>
<!-- /头 -->

<!-- 主体 -->
<section class="hot">
    <h1>全部歌单🎵</h1>
    <ul onclick="location.href='./player.html'">
        <li><div><img src="./assets/imgs/1.jpg" alt=""></div><span>【华语精选】奇迹，在爱与勇气的身后</span></li>
        <li><div><img src="./assets/imgs/2.jpg" alt=""></div><span>初秋絮语，用音乐记下你的点点滴滴</span></li>
        <li><div><img src="./assets/imgs/3.jpg" alt=""></div><span>【动漫】按头安利，补番必听</span></li>
        <li><div><img src="./assets/imgs/4.jpg" alt=""></div><span>感恩节限定 | 感恩万物，感谢有你</span></li>
        
        <li><div><img src="./assets/imgs/5.jpg" alt=""></div><span>回忆向 | 手划圈，时空逆转</span></li>
        <li><div><img src="./assets/imgs/6.jpg" alt=""></div><span>我在他乡，挺好的</span></li>
        <li><div><img src="./assets/imgs/7.jpg" alt=""></div><span>收藏起来，这些卡点音乐BGM超燃！</span></li>
        <li><div><img src="./assets/imgs/8.jpg" alt=""></div><span>购物专用BGM，快来抄作业！</span></li>

        <li><div><img src="./assets/imgs/1.jpg" alt=""></div><span>【华语精选】奇迹，在爱与勇气的身后</span></li>
        <li><div><img src="./assets/imgs/2.jpg" alt=""></div><span>初秋絮语，用音乐记下你的点点滴滴</span></li>
        <li><div><img src="./assets/imgs/3.jpg" alt=""></div><span>【动漫】按头安利，补番必听</span></li>
        <li><div><img src="./assets/imgs/4.jpg" alt=""></div><span>感恩节限定 | 感恩万物，感谢有你</span></li>
    </ul>
</section>
<!-- /主体 -->

<!-- 分页 -->
<section class="page">
    <ul>
        <li>&lt;</li>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>...</li>
        <li>100</li>
        <li>&gt;</li>
    </ul>
</section>
<!-- 分页 -->

<!-- 底部 -->
<footer>
    <p>
        Copyright 2018 © .TAIHE MUSIC GROUP. 千锋教育仅授课使用
    </p>
    <p>
        <div>
            <span>信息网络传播视听许可证: 11231223</span>
            | 
            <span> 宁公网安备: 442234324309号</span>
            |
            <span>增值电信业务经营许可证: 宁B2-2012319</span>
            |
            <span>网络文化经营许可证号码: 宁网文[2021]0332-351号</span></div>
    </p>
    <p>举报邮箱: zhaoxiaokang@1000phone.com</p>
</footer>
<!-- /底部 -->
</body>

</html>
<script src="./assets/js/login.js"></script>
<script src="./assets/js/nprogress.js"></script>